<template>
  <div class="order-card">
    <img :src="order.prodPicture" alt="商品图片" class="product-image" />
    <div class="order-details">
      <h2 class="product-name">{{ order.prodName }}</h2>
      <p class="product-price">价格: ¥{{ order.orderPrice }}</p>
      <p class="order-status">状态: {{ statusText }}</p>
      <p class="order-date">下单时间: {{ formatOrderDate(order.orderDate) }}</p>
      <div class="order-actions">
        <a-button 
          v-if="order.orderStatus === 0" 
          type="primary" 
          class="remind-button" 
          @click="remindShipment"
        >
          催促发货
        </a-button>
        <a-button 
          v-if="order.orderStatus === 2" 
          type="success" 
          class="confirm-button" 
          @click="confirmReceipt"
        >
          签收
        </a-button>
        <a-button 
          v-if="order.orderStatus !== 4"
          type="danger" 
          class="refuse-button" 
          @click="refuseReturn"
        >
          取消订单/退货
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Button as AButton } from 'ant-design-vue'; // 引入 Ant Design 的 Button 组件
import { ref, onBeforeMount, onMounted } from 'vue';
import request from '../../../util/request';
import { message } from 'ant-design-vue';
import defaultImage from '../../../assets/default.jpg';
import { parseTime } from '../../../util/parseTime';

export default {
  name: 'OrderCard',
  components: {
    AButton,
  },
  props: {
    order: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const order = props.order;
    const statusText = ref('');

    onBeforeMount(() => {
      if(order.prodPicture === null) {
        order.prodPicture = defaultImage;
      }
    });

    onMounted(() => {
      if(order.orderStatus === 0) {
        statusText.value = '已下单';
      } else if(order.orderStatus === 1) {
        statusText.value = '正在运输';
      } else if(order.orderStatus === 2) {
        statusText.value = '已送达';
      } else if(order.orderStatus === 3) {
        statusText.value = '已签收';
      } else if(order.orderStatus === 4) {
        statusText.value = '已取消';
      } else {
        statusText.value = '未知状态';
      }
    });

    const formatOrderDate = (time) => {
      return time === null ? '' : parseTime(time);
    }

    const remindShipment = () => {
      message.success('催促发货请求已发送');
    }

    const confirmReceipt = () => {
      if(!confirm('确认签收？(请务必确认货品收到且无质量问题)')) {
        return;
      }
      request.post('order/ok', {
        orderid: order.id,
        userid: sessionStorage.getItem('userid'),
      }).then(res => {
        if(res.data.flag === 'success') {
          message.success('签收成功，请刷新页面以检查结果');
        } else {
          message.error('签收失败，请稍后重试或联系管理员');
        }
      }).catch(err => {
        message.error('签收失败: ', err);
      });
    }

    const refuseReturn = () => {
      if(!confirm('确认取消订单/退货？')) {
        return;
      }
      request.post('order/problem', {
        orderid: order.id,
        userid: sessionStorage.getItem('userid'),
      }).then(res => {
        if(res.data.flag === 'success') {
          message.success('取消订单/退货请求已发送');
        } else {
          message.error('取消订单/退货失败，请稍后重试或联系管理员');
        }
      }).catch(err => {
        message.error('取消订单/退货失败: ', err);
      });
    }

    return {
      order,
      statusText,
      formatOrderDate,
      remindShipment,
      confirmReceipt,
      refuseReturn,
    }
  },
};
</script>

<style src="../../../assets/styles/cusOrderCard.css" scoped></style>
